<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:text="${title} + ' - FTP管理系统'">FTP管理系统</title>

    <!-- Bootstrap CSS -->
    <link th:href="@{/webjars/bootstrap/5.3.0/css/bootstrap.min.css}" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="https://witmore.oss-cn-hangzhou.aliyuncs.com/cdn/npm/font-awesome/6.7.2/all.min.css" rel="stylesheet">
    <!-- Custom CSS -->
    <link th:href="@{/css/admin.css}" rel="stylesheet">
</head>
<body>
    <div id="app">
        <div class="admin-layout">
            <!-- 左侧边栏 -->
            <div class="sidebar">
                <div class="sidebar-brand">
                    <h4><i class="fas fa-server me-2"></i>FTP管理系统</h4>
                </div>
                <ul class="sidebar-menu">
                    <li>
                        <a href="/admin" class="active">
                            <i class="fas fa-tachometer-alt"></i>仪表盘
                        </a>
                    </li>
                    <li>
                        <a href="/admin/users">
                            <i class="fas fa-users"></i>用户管理
                        </a>
                    </li>
                    <li>
                        <a href="/admin/logs">
                            <i class="fas fa-list-alt"></i>操作日志
                        </a>
                    </li>
                    <li>
                        <a href="/admin/connections">
                            <i class="fas fa-plug"></i>连接管理
                        </a>
                    </li>
                    <li>
                        <a href="/admin/monitor">
                            <i class="fas fa-chart-line"></i>系统监控
                        </a>
                    </li>
                </ul>
            </div>

            <!-- 主内容区域 -->
            <div class="main-content">
                <!-- 顶部导航栏 -->
                <div class="top-navbar">
                    <h1 class="page-title">仪表盘</h1>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item active">仪表盘</li>
                        </ol>
                    </nav>
                </div>

                <!-- 内容区域 -->
                <div class="content-wrapper">
            <!-- 统计卡片 -->
            <div class="row mb-4">
                <div class="col-xl-3 col-md-6 mb-4">
                    <div class="stats-card primary">
                        <div class="d-flex align-items-center justify-content-between">
                            <div>
                                <div class="stats-label">总用户数</div>
                                <div class="stats-number" v-text="stats.totalUsers">{{ stats.totalUsers }}</div>
                            </div>
                            <div>
                                <i class="fas fa-users stats-icon"></i>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xl-3 col-md-6 mb-4">
                    <div class="stats-card success">
                        <div class="d-flex align-items-center justify-content-between">
                            <div>
                                <div class="stats-label">连接记录</div>
                                <div class="stats-number" v-text="stats.totalConnections">{{ stats.totalConnections }}</div>
                            </div>
                            <div>
                                <i class="fas fa-plug stats-icon"></i>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xl-3 col-md-6 mb-4">
                    <div class="stats-card info">
                        <div class="d-flex align-items-center justify-content-between">
                            <div>
                                <div class="stats-label">文件操作</div>
                                <div class="stats-number" v-text="stats.totalFileLogs">{{ stats.totalFileLogs }}</div>
                            </div>
                            <div>
                                <i class="fas fa-file-alt stats-icon"></i>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xl-3 col-md-6 mb-4">
                    <div class="stats-card warning">
                        <div class="d-flex align-items-center justify-content-between">
                            <div>
                                <div class="stats-label">FTP端口</div>
                                <div class="stats-number" v-text="stats.port">{{ stats.port }}</div>
                            </div>
                            <div>
                                <i class="fas fa-server stats-icon"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 快速操作和系统信息 -->
            <div class="row">
                <!-- 快速操作 -->
                <div class="col-lg-6 mb-4">
                    <div class="card shadow">
                        <div class="card-header py-3">
                            <h6 class="m-0 font-weight-bold text-primary">
                                <i class="fas fa-bolt me-2"></i>快速操作
                            </h6>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <a href="/admin/users" class="btn btn-primary btn-block">
                                        <i class="fas fa-user-plus me-2"></i>添加用户
                                    </a>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <a href="/admin/files" class="btn btn-success btn-block">
                                        <i class="fas fa-folder-open me-2"></i>浏览文件
                                    </a>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <a href="/admin/logs" class="btn btn-info btn-block">
                                        <i class="fas fa-list me-2"></i>查看日志
                                    </a>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <a href="/admin/monitor" class="btn btn-warning btn-block">
                                        <i class="fas fa-chart-bar me-2"></i>系统监控
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 系统信息 -->
                <div class="col-lg-6 mb-4">
                    <div class="card shadow">
                        <div class="card-header py-3">
                            <h6 class="m-0 font-weight-bold text-primary">
                                <i class="fas fa-info-circle me-2"></i>系统信息
                            </h6>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-sm-6">
                                    <strong>FTP服务器状态:</strong>
                                </div>
                                <div class="col-sm-6">
                                    <span class="badge bg-success">运行中</span>
                                </div>
                            </div>
                            <hr>
                            <div class="row">
                                <div class="col-sm-6">
                                    <strong>监听端口:</strong>
                                </div>
                                <div class="col-sm-6" v-text="stats.port">
                                    {{ stats.port }}
                                </div>
                            </div>
                            <hr>
                            <div class="row">
                                <div class="col-sm-6">
                                    <strong>被动端口范围:</strong>
                                </div>
                                <div class="col-sm-6" v-text="stats.passivePorts">
                                    {{ stats.passivePorts }}
                                </div>
                            </div>
                            <hr>
                            <div class="row">
                                <div class="col-sm-6">
                                    <strong>最大连接数:</strong>
                                </div>
                                <div class="col-sm-6" v-text="stats.maxConnections">
                                    {{ stats.maxConnections }}
                                </div>
                            </div>
                            <hr>
                            <div class="row">
                                <div class="col-sm-6">
                                    <strong>根目录:</strong>
                                </div>
                                <div class="col-sm-6" v-text="stats.rootDirectory">
                                    {{ stats.rootDirectory }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 最近活动 -->
            <div class="row">
                <div class="col-12">
                    <div class="card shadow">
                        <div class="card-header py-3 d-flex justify-content-between align-items-center">
                            <h6 class="m-0 font-weight-bold text-primary">
                                <i class="fas fa-clock me-2"></i>最近文件操作
                            </h6>
                            <div class="btn-group btn-group-sm">
                                <button class="btn btn-outline-primary" @click="loadRecentLogs" title="刷新">
                                    <i class="fas fa-sync-alt"></i>
                                </button>
                                <a href="/admin/logs" class="btn btn-outline-info" title="查看全部日志">
                                    <i class="fas fa-external-link-alt"></i>
                                </a>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-bordered">
                                    <thead>
                                        <tr>
                                            <th>时间</th>
                                            <th>用户</th>
                                            <th>操作</th>
                                            <th>文件</th>
                                            <th>状态</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="log in recentLogs" :key="log.id">
                                            <td>{{ formatDate(log.createTime) }}</td>
                                            <td>{{ log.username }}</td>
                                            <td>
                                                <span class="badge" :class="getOperationBadgeClass(log.operationType)">
                                                    {{ log.operationType }}
                                                </span>
                                            </td>
                                            <td>{{ log.fileName }}</td>
                                            <td>
                                                <span class="badge" :class="log.status === 'SUCCESS' ? 'bg-success' : 'bg-danger'">
                                                    {{ log.status }}
                                                </span>
                                            </td>
                                        </tr>
                                        <tr v-if="recentLogs.length === 0">
                                            <td colspan="5" class="text-center text-muted">暂无数据</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <!-- 分页组件 -->
                            <div v-if="pagination.total > 0" class="mt-4">
                                <div class="d-flex justify-content-end align-items-center flex-wrap">
                                    <!-- 统计信息 -->
                                    <div class="text-muted small me-4 mb-2">
                                        <i class="fas fa-info-circle me-1"></i>
                                        共 {{ pagination.total }} 条记录
                                    </div>
                                    
                                    <!-- 每页显示选择器 -->
                                    <div class="me-3 mb-2">
                                        <label class="form-label mb-0 me-2 text-muted small">每页显示:</label>
                                        <select class="form-select form-select-sm d-inline-block" 
                                                style="width: auto;" 
                                                v-model="pagination.size" 
                                                @change="changePageSize">
                                            <option value="10">10 条</option>
                                            <option value="20">20 条</option>
                                            <option value="50">50 条</option>
                                            <option value="100">100 条</option>
                                        </select>
                                    </div>
                                    
                                    <!-- 分页导航 -->
                                    <nav v-if="pagination.pages > 1" class="mb-2">
                                        <ul class="pagination pagination-sm mb-0">
                                            <!-- 首页 -->
                                            <li class="page-item" :class="{ disabled: pagination.current <= 1 }">
                                                <button class="page-link" 
                                                        @click="changePage(1)" 
                                                        :disabled="pagination.current <= 1"
                                                        title="首页">
                                                    <i class="fas fa-angle-double-left"></i>
                                                </button>
                                            </li>
                                            
                                            <!-- 上一页 -->
                                            <li class="page-item" :class="{ disabled: pagination.current <= 1 }">
                                                <button class="page-link" 
                                                        @click="changePage(pagination.current - 1)" 
                                                        :disabled="pagination.current <= 1"
                                                        title="上一页">
                                                    <i class="fas fa-angle-left"></i>
                                                </button>
                                            </li>
                                            
                                            <!-- 页码 -->
                                            <li class="page-item"
                                                v-for="page in getPageNumbers()"
                                                :key="page"
                                                :class="{ 
                                                    active: page === pagination.current, 
                                                    disabled: page === '...' 
                                                }">
                                                <button class="page-link"
                                                        @click="page !== '...' ? changePage(page) : null"
                                                        :disabled="page === '...'"
                                                        :class="{ 'fw-bold': page === pagination.current }">
                                                    {{ page }}
                                                </button>
                                            </li>
                                            
                                            <!-- 下一页 -->
                                            <li class="page-item" :class="{ disabled: pagination.current >= pagination.pages }">
                                                <button class="page-link" 
                                                        @click="changePage(pagination.current + 1)" 
                                                        :disabled="pagination.current >= pagination.pages"
                                                        title="下一页">
                                                    <i class="fas fa-angle-right"></i>
                                                </button>
                                            </li>
                                            
                                            <!-- 末页 -->
                                            <li class="page-item" :class="{ disabled: pagination.current >= pagination.pages }">
                                                <button class="page-link" 
                                                        @click="changePage(pagination.pages)" 
                                                        :disabled="pagination.current >= pagination.pages"
                                                        title="末页">
                                                    <i class="fas fa-angle-double-right"></i>
                                                </button>
                                            </li>
                                        </ul>
                                    </nav>
                                    
                                    <!-- 当只有一页时显示的信息 -->
                                    <div v-else class="text-muted small mb-2">
                                        <i class="fas fa-check-circle me-1 text-success"></i>
                                        所有数据已显示完毕
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                </div>
            </div>
        </div>
    </div>

    <!-- JavaScript Libraries -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script th:src="@{/webjars/bootstrap/5.3.0/js/bootstrap.bundle.min.js}"></script>

    <script>
        const { createApp } = Vue;

        createApp({
            data() {
                return {
                    stats: {
                        totalUsers: 0,
                        totalConnections: 0,
                        totalFileLogs: 0,
                        port: 0,
                        passivePorts: '',
                        maxConnections: 0,
                        rootDirectory: ''
                    },
                    recentLogs: [],
                    pagination: {
                        current: 1,
                        size: 20,
                        total: 0,
                        pages: 0
                    }
                }
            },
            mounted() {
                this.loadStats();
                this.loadRecentLogs();

                // 每30秒刷新一次数据
                setInterval(() => {
                    this.loadStats();
                    this.loadRecentLogs();
                }, 30000);
            },
            methods: {
                async loadStats() {
                    try {
                        const response = await axios.get('/api/ftp/status');
                        if (response.data.code === 200) {
                            this.stats = response.data.data;
                        }
                    } catch (error) {
                        console.error('加载统计数据失败:', error);
                    }
                },
                async loadRecentLogs() {
                    try {
                        const params = {
                            page: this.pagination.current,
                            size: this.pagination.size,
                            sortField: 'createTime',
                            sortOrder: 'DESC'
                        };

                        const response = await axios.get('/api/ftp/file-logs', { params });

                        if (response.data.code === 200) {
                            this.recentLogs = response.data.records || [];

                            // 处理分页数据 - 兼容不同的响应格式
                            if (response.data.total !== undefined) {
                                this.pagination.total = response.data.total;
                            } else if (response.data.page && response.data.page.total !== undefined) {
                                this.pagination.total = response.data.page.total;
                            } else {
                                this.pagination.total = this.recentLogs.length;
                            }

                            if (response.data.pages !== undefined) {
                                this.pagination.pages = response.data.pages;
                            } else if (response.data.page && response.data.page.totalPage !== undefined) {
                                this.pagination.pages = response.data.page.totalPage;
                            } else {
                                this.pagination.pages = Math.ceil(this.pagination.total / this.pagination.size);
                            }
                        }
                    } catch (error) {
                        console.error('加载最近日志失败:', error);
                    }
                },
                formatDate(dateStr) {
                    if (!dateStr) return '';
                    return new Date(dateStr).toLocaleString('zh-CN');
                },
                getOperationBadgeClass(operation) {
                    switch (operation) {
                        case 'UPLOAD': return 'bg-primary';
                        case 'DOWNLOAD': return 'bg-success';
                        case 'DELETE': return 'bg-danger';
                        case 'LIST': return 'bg-info';
                        default: return 'bg-secondary';
                    }
                },
                changePage(page) {
                    if (page >= 1 && page <= this.pagination.pages) {
                        this.pagination.current = page;
                        this.loadRecentLogs();
                    }
                },
                changePageSize() {
                    // 重置到第一页
                    this.pagination.current = 1;
                    // 重新加载数据
                    this.loadRecentLogs();
                },
                getPageNumbers() {
                    const pages = [];
                    const total = this.pagination.pages;
                    const current = this.pagination.current;

                    if (total <= 5) {
                        for (let i = 1; i <= total; i++) {
                            pages.push(i);
                        }
                    } else {
                        if (current <= 3) {
                            for (let i = 1; i <= 5; i++) {
                                pages.push(i);
                            }
                            if (total > 5) {
                                pages.push('...');
                                pages.push(total);
                            }
                        } else if (current >= total - 2) {
                            pages.push(1);
                            if (total > 5) {
                                pages.push('...');
                            }
                            for (let i = total - 4; i <= total; i++) {
                                pages.push(i);
                            }
                        } else {
                            pages.push(1);
                            pages.push('...');
                            for (let i = current - 1; i <= current + 1; i++) {
                                pages.push(i);
                            }
                            pages.push('...');
                            pages.push(total);
                        }
                    }

                    return pages;
                }
            }
        }).mount('#app');
    </script>

    <style>
        .border-left-primary {
            border-left: 0.25rem solid #4e73df !important;
        }
        .border-left-success {
            border-left: 0.25rem solid #1cc88a !important;
        }
        .border-left-info {
            border-left: 0.25rem solid #36b9cc !important;
        }
        .border-left-warning {
            border-left: 0.25rem solid #f6c23e !important;
        }
        .text-gray-800 {
            color: #5a5c69 !important;
        }
        .text-gray-300 {
            color: #dddfeb !important;
        }
        .btn-block {
            width: 100%;
        }
        
        /* 分页组件样式优化 */
        .pagination .page-item.active .page-link {
            background-color: #007bff !important;
            border-color: #007bff !important;
            color: #ffffff !important;
            font-weight: bold;
        }
        
        .pagination .page-item.active .page-link:hover {
            background-color: #0056b3 !important;
            border-color: #0056b3 !important;
            color: #ffffff !important;
        }
        
        .pagination .page-link {
            color: #007bff;
            border: 1px solid #dee2e6;
            padding: 0.375rem 0.75rem;
            margin: 0 2px;
            border-radius: 0.375rem;
            transition: all 0.2s ease-in-out;
        }
        
        .pagination .page-link:hover {
            color: #0056b3;
            background-color: #e9ecef;
            border-color: #dee2e6;
        }
        
        .pagination .page-item.disabled .page-link {
            color: #6c757d;
            background-color: #fff;
            border-color: #dee2e6;
        }
        
        .pagination .page-item.disabled .page-link:hover {
            color: #6c757d;
            background-color: #fff;
            border-color: #dee2e6;
        }
        
        /* 分页大小选择器样式 */
        .form-select-sm {
            border-radius: 0.375rem;
            border: 1px solid #ced4da;
            transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        }
        
        .form-select-sm:focus {
            border-color: #86b7fe;
            outline: 0;
            box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
        }
    </style>
</body>
</html>
